<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 48
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="audit-icon"
  >
    <defs>
      <linearGradient id="auditGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#ffed4e;stop-opacity:1" />
      </linearGradient>
    </defs>

    <!-- 徽章圆形背景 -->
    <circle cx="32" cy="32" r="22" fill="url(#auditGrad)" opacity="0.2"/>

    <!-- 徽章主体 -->
    <circle cx="32" cy="32" r="18" fill="url(#auditGrad)"/>

    <!-- 对勾 -->
    <path
      d="M22 32 L28 38 L42 24"
      stroke="white"
      stroke-width="3"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    />

    <!-- 装饰星星 -->
    <circle cx="18" cy="18" r="2" fill="url(#auditGrad)" opacity="0.6"/>
    <circle cx="46" cy="18" r="2" fill="url(#auditGrad)" opacity="0.6"/>
    <circle cx="18" cy="46" r="2" fill="url(#auditGrad)" opacity="0.6"/>
    <circle cx="46" cy="46" r="2" fill="url(#auditGrad)" opacity="0.6"/>
  </svg>
</template>

<style scoped>
.audit-icon {
  transition: all 0.3s ease;
}

.audit-icon:hover {
  transform: scale(1.1) rotate(10deg);
}
</style>
